<!--
 * @Author: 赵京涛 z19472333952022@163.com
 * @Date: 2024-10-08 09:40:41
 * @LastEditors: 赵京涛 z19472333952022@163.com
 * @LastEditTime: 2024-10-08 09:40:41
 * @projectName: HeBeiHaiYangData
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki
-->
<template>
  <div class="homeBox">
    <el-row :gutter="20" class="homeBox-top">
      <!-- 各类型数据上传数据量 -->
      <el-col :span="17" v-loading="loading.loading1">
        <div class="homeBox-top-left" ref='glxDataUploadNumRef'></div>
      </el-col>
      <!-- 上传数总量据量 -->
      <el-col :span="7" class='d-flex flex-column h-100' v-loading="loading.loading2">
        <homeTitle title='上传数据总量（个）' />
        <div class="homeBox-top-right flex-1" ref='uploadDataTotalRef'></div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="homeBox-bottom">
      <!-- 今日上传数据 -->
      <el-col :span="17" class='d-flex flex-column h-100' v-loading="loading.loading4">
        <div class="homeBox-bottom-left d-flex flex-column h-100">
          <homeTitle title='今日上传数据' />
          <div class='flex-1 p-1'>
            <el-table :data="totalUploadData" height='calc(100%)' border>
              <el-table-column align="center" width="120" label="序号">
                <template v-slot:default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="文件名" prop="attachName" align="center" />
              <el-table-column label="上传时间" prop="creationTime" align="center" />
              <el-table-column label="数据量" prop="dataSize" align="center" />
              <el-table-column label="操作" align="center" width="180">
                <template v-slot:default="scope">
                  <el-link type="primary" @click='seeTaskReportDataHandler(scope.row)'>查看</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :span="7" v-loading="loading.loading3">
        <!-- 模版列表 -->
        <div class="homeBox-bottom-right d-flex flex-column h-100">
          <homeTitle title='模板文件' />
          <div class='flex-1 p-1'>
            <el-table :data="templateData" height='calc(100% - 15px)' border>
              <el-table-column align="center" width="120" label="序号">
                <template v-slot:default="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="文件名" prop="name" align="center">
                <template v-slot:default="scope">
                  <el-link type="primary" @click="downloadCurrenTemplate(scope.row)">{{ scope.row.name }}</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 查看数据对话框 -->
    <el-dialog v-dialogDragPlus :title="renderDataParams.title" :visible.sync="renderDataParams.show" width="80vw" append-to-body>
      <div class='renderBox-center' v-loading='loading.renderTableLoading'>
        <renderDialogTable :isShow='renderDataParams.show' :isShowThreeColumn='isShowThreeColumn' :tableHeader='headerList' :tableData='renderTableList' />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTaskReportData } from '@/api/dataReport'
import homeTitle from './components/home-title.vue'
import renderDialogTable from '@/components/renderDialogTable/index.vue'
import {
  columnNameTransformArrayAccording,
  threeColumnNameTransformDataStructure,
  transformOrder,
  useBar3DCharts,
  useRotatingPieChart,
  useTaskSuccessHeaderTable,
  useTaskSuccesTableDataList
} from '@/hooks'
import { getDataTemplateList, getDataUploadCount, getDataUploadNumber, getDayUploadInfo } from '@/api/home'

export default {
  name: "Index",
  inject: ['layout'],
  components: { homeTitle, renderDialogTable },
  data() {
    return {
      loading: {
        loading1: false,
        loading2: false,
        loading3: false,
        loading4: false,
        renderTableLoading: false
      },
      templateData: [], // 模板文件集合
      totalUploadData: [], // 今日上传数据列表集合
      glxDataUploadParams: {}, // 各类型数据量
      uploadDataTotalParams: {}, // 上传数据总量
      uploadTemplateChartsParams: {}, // 模板列表图表参数
      isShowThreeColumn: false, // 是否显示三级表头数据
      headerList: [], // 动态表头
      renderTableList: [], // 动态列表数据
      renderDataParams: {
        title: '',
        show: false
      }
    };
  },
  created() {
    this.$nextTick(() => {
      // 各类型数据量处理
      this.getDataUploadCount()
      // 上传数据总量
      this.getDataUploadNumber()
      // 今日上传数据
      this.getDayUploadInfo()
      // 上传模板列表
      this.getDataTemplateList()
    })
  },
  methods: {
    /**
     * 各类型数据量处理
     */
    async getDataUploadCount() {
      try {
        this.loading.loading1 = true
        const { code, data } = await getDataUploadCount()
        if (code === 200 && data) {
          this.glxDataUploadParams.lengendData = ['各类型数据上传数据量']
          this.glxDataUploadParams.yAxisName = '单位（个）'
          this.glxDataUploadParams.seriesName = '各类型数据上传数据量'
          this.glxDataUploadParams.xData = data.map(s => s.name)
          this.glxDataUploadParams.seriesData = data.map(s => s.value)
          useBar3DCharts(this.$refs.glxDataUploadNumRef, this.glxDataUploadParams)
        } else {
          this.layout.chartNoData(this.$refs.glxDataUploadNumRef)
        }
        this.loading.loading1 = false
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 上传数据总量
     */
    async getDataUploadNumber() {
      try {
        this.loading.loading2 = true
        const { code, msg } = await getDataUploadNumber()
        if (code === 200 && msg) {
          this.uploadDataTotalParams.showName = '上传数据总量'
          this.uploadDataTotalParams.dataList = [{ num: Number(msg), name: '上传数据总量' }]
          useRotatingPieChart(this.$refs.uploadDataTotalRef, this.uploadDataTotalParams)
        } else {
          this.layout.chartNoData(this.$refs.uploadDataTotalRef)
        }
        this.loading.loading2 = false
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 今日上传数据
     */
    async getDayUploadInfo() {
      try {
        this.loading.loading4 = true
        const { code, data } = await getDayUploadInfo()
        if (code === 200 && data) {
          this.totalUploadData = data
        } else {
          this.totalUploadData = []
        }
        this.loading.loading4 = false
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 上传模板图表展示
     */
    async getDataTemplateList() {
      try {
        this.loading.loading3 = true
        const { code, data } = await getDataTemplateList()
        if (code === 200 && data) {
          this.templateData = data
        } else {
          this.templateData = []
        }
        this.loading.loading3 = false
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 下载当前模板
     */
    downloadCurrenTemplate(row) {
      this.download('/reportUpload/downloadTaskFile.do', { taskId: row.id }, `${row.name}`)
    },
    /**
     * 获取任务关联数据信息
     */
    async seeTaskReportDataHandler(row) {
      try {
        this.loading.renderTableLoading = true
        this.renderDataParams.title = row.attachName.replace(/\.(xlsx|xls|csv)$/i, "")
        this.renderDataParams.show = true
        const { code, data } = await getTaskReportData({ taskId: row.id })
        if (code === 200 && data.length > 0) {
          // 配置表头
          const _middleHeader = useTaskSuccessHeaderTable(data[0])
          const isThreeColumn = _middleHeader.some(item => item.headerThirdRow)
          _middleHeader.forEach(item => {
            if (!item.headerThirdRow) delete item.headerThirdRow
          })
          if (Array.isArray(_middleHeader) && _middleHeader[0]?.colspan && !isThreeColumn) {
            this.headerList = columnNameTransformArrayAccording(_middleHeader)
            this.headerList = transformOrder(_middleHeader, this.headerList).filter(s => s.isShow !== 0 && s.columnName !== 'id')
            this.isShowThreeColumn = false
          } else if (Array.isArray(_middleHeader) && isThreeColumn) {
            this.headerList = threeColumnNameTransformDataStructure(_middleHeader)
            this.isShowThreeColumn = true
          } else {
            this.isShowThreeColumn = false
            this.headerList = _middleHeader
          }
          // 配置表格数据
          this.renderTableList = useTaskSuccesTableDataList(data)
        } else {
          this.isShowThreeColumn = false
          this.headerList = []
          this.renderTableList = []
        }
        this.loading.renderTableLoading = false
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.homeBox {
  &-top {
    margin: 0 !important;
    height: 350px;
    &-left {
      height: 350px;
      cursor: pointer;
      background: white;
      border-radius: 4px;
      transition: 0.1s all linear;
      padding: 15px;
    }
    &-left:hover {
      box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
        0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
    }
    &-right {
      cursor: pointer;
      flex: 1;
      background: white;
      border-radius: 4px;
      transition: 0.1s all linear;
      padding: 15px;
    }
    &-right:hover {
      box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
        0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
    }
  }
  &-bottom {
    margin: 20px 0 0 0 !important;
    height: 550px;
    &-left {
      height: 550px;
      background: white;
      border-radius: 4px;
      transition: 0.1s all linear;
    }
    &-left:hover {
      box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
        0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
    }
    &-right {
      height: 550px;
      background: white;
      border-radius: 4px;
      transition: 0.1s all linear;
    }
    &-right:hover {
      box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
        0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
        0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075);
    }
  }
}
</style>

